'use client';

import React, { useEffect, useState } from 'react';
import { request } from '@/utils/request';
import { ResponseCode } from '@/utils/response';
import { FaUser, FaCalendar, FaBook, FaClock, FaCoins, FaGraduationCap, FaComment, FaPlus, FaCheck, FaTimes } from 'react-icons/fa';
import { useParams, useRouter } from 'next/navigation';
import { CosImage } from '@/components/common/CosImage';
import { getCurrentUser } from '@/utils/client-auth';
import CourseCard from '@/app/courses/components/CourseCard';
import ForumPostItem from '@/components/forum/ForumPostItem';
import TaskItem from '@/app/tasks/components/TaskItem';

interface UserProfile {
  id: number;
  nickname: string;
  email: string;
  avatar: string;
  bio: string;
  createdAt: string;
  lastLoginAt: string;
  role: string;
  status: string;
  points: number;
  studyTime: number;
  loginCount: number;
  publishedCourseCount: number;
  postCount: number;
  replyCount: number;
  publishedTaskCount: number;
  acceptedTaskCount: number;
  totalEarnings: number;
  totalSpent: number;
}

interface Course {
  id: number;
  title: string;
  description: string;
  createdAt: string;
}

interface Post {
  id: number;
  title: string;
  content: string;
  createdAt: string;
}

interface Task {
  id: number;
  title: string;
  description: string;
  points: number;
  status: string;
  createdAt: string;
}

export default function UserProfilePage() {
  const params = useParams();
  const router = useRouter();
  const userId = params.id as string;
  const [profile, setProfile] = useState<UserProfile | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [modalType, setModalType] = useState<'courses' | 'posts' | 'publishedTasks' | 'acceptedTasks'>('courses');
  const [modalData, setModalData] = useState<Course[] | Post[] | Task[]>([]);
  const [modalLoading, setModalLoading] = useState(false);

  useEffect(() => {
    // 检查用户是否已登录
    const currentUser = getCurrentUser();
    if (!currentUser) {
      // 不直接跳转，而是显示未登录状态
      setIsLoading(false);
      return;
    }

    if (userId) {
      loadUserProfile();
    }
  }, [userId, router]);

  const loadUserProfile = async () => {
    // 再次检查登录状态
    const currentUser = getCurrentUser();
    if (!currentUser) {
      setIsLoading(false);
      return;
    }

    try {
      setIsLoading(true);
      setError(null);
      
      const response = await request<UserProfile>(`/user/userprofile/${userId}`, {
        method: 'GET',
      });

      if (response.code === ResponseCode.SUCCESS && response.data) {
        setProfile(response.data);
      } else {
        setError(response.message || '获取用户资料失败');
      }
    } catch (err) {
      console.error('加载用户资料失败:', err);
      setError('加载用户资料失败');
    } finally {
      setIsLoading(false);
    }
  };

  // 加载弹窗数据
  const loadModalData = async (type: 'courses' | 'posts' | 'publishedTasks' | 'acceptedTasks') => {
    setModalType(type);
    setModalLoading(true);
    setShowModal(true);

    try {
      let endpoint = '';
      switch (type) {
        case 'courses':
          endpoint = `/user/${userId}/courses`;
          break;
        case 'posts':
          endpoint = `/user/${userId}/forum/posts`;
          break;
        case 'publishedTasks':
          endpoint = `/user/${userId}/tasks/published`;
          break;
        case 'acceptedTasks':
          endpoint = `/user/${userId}/tasks/accepted`;
          break;
      }

      const response = await request(endpoint, { method: 'GET' });
      if (response.code === ResponseCode.SUCCESS) {
        const data = response.data as any;
        setModalData(data?.list || data || []);
      } else {
        setModalData([]);
      }
    } catch (err) {
      console.error('加载数据失败:', err);
      setModalData([]);
    } finally {
      setModalLoading(false);
    }
  };

  // 获取弹窗标题
  const getModalTitle = () => {
    switch (modalType) {
      case 'courses': return '发布的课程';
      case 'posts': return '发布的帖子';
      case 'publishedTasks': return '发布的任务';
      case 'acceptedTasks': return '接受的任务';
      default: return '';
    }
  };

  // 渲染弹窗内容
  const renderModalContent = () => {
    if (modalLoading) {
      return <div className="text-center py-8">加载中...</div>;
    }

    if (modalData.length === 0) {
      return <div className="text-center py-8 text-gray-500">暂无数据</div>;
    }

    if (modalType === 'courses') {
      // 课程使用 CourseCard 组件
      return (
        <div className="max-h-96 overflow-y-auto p-4">
          <div className="grid grid-cols-2 gap-4">
            {modalData.map((item: any, index: number) => (
              <div key={item.id || index} className="transform scale-75 origin-top-left">
                <CourseCard course={{
                  id: item.id,
                  title: item.title,
                  coverUrl: item.coverUrl || '/default-course-cover.jpg',
                  summary: item.description || '',
                  description: item.description || '',
                  instructor: item.instructor || '未知讲师',
                  viewCount: item.viewCount || 0,
                  studentCount: item.studentCount || 0,
                  level: item.level || 'BEGINNER',
                  totalDuration: item.totalDuration || 0,
                  ratingScore: item.ratingScore || 100,
                  categoryId: item.categoryId || 1,
                  directionId: item.directionId || 1,
                }} />
              </div>
            ))}
          </div>
        </div>
      );
    }

    // 其他类型使用原来的简单显示
    if (modalType === 'posts') {
      // 帖子使用 ForumPostItem 组件
      return (
        <div className="max-h-96 overflow-y-auto p-4">
          <div className="space-y-4">
            {modalData.map((item: any, index: number) => {
              // 从content中提取图片链接
              let imageUrl = '';
              if (item.content) {
                const imgMatch = item.content.match(/<img[^>]+src=["']([^"']+)["'][^>]*>/);
                if (imgMatch) {
                  imageUrl = imgMatch[1];
                }
              }
              
              return (
                <ForumPostItem
                  key={item.id || index}
                  id={item.id?.toString() || index.toString()}
                  title={item.title || ''}
                  description={item.content ? item.content.replace(/<[^>]*>/g, '') : (item.description || '')}
                  imageUrl={imageUrl}
                  author={item.author?.nickname || '未知用户'}
                  link={`/forum/posts/${item.id}`}
                  post={item}
                  currentUser={null}
                  onPostUpdate={() => {}}
                />
              );
            })}
          </div>
        </div>
      );
    }
    
    return (
      <div className="max-h-96 overflow-y-auto">
        {modalData.map((item: any, index: number) => (
          <div key={item.id || index} className="border-b border-gray-200 last:border-b-0">
            <TaskItem 
              task={{
                id: item.id,
                title: item.title,
                content: item.content || item.description || '',
                status: item.status,
                points: item.points || 0,
                viewCount: item.viewCount || 0,
                createdAt: item.createdAt,
                category: item.category || { id: 1, name: '默认分类', imageUrl: '', description: '' },
                author: item.author || { id: 1, nickname: '未知用户', avatar: '' },
                applications: item.applications || []
              }}
            />
          </div>
        ))}
      </div>
    );
  };

  if (isLoading) {
    return (
      <div className="min-h-screen flex justify-center items-center p-4">
        <div className="flex flex-col items-center gap-2">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
          <p className="text-sm text-gray-500">加载中...</p>
        </div>
      </div>
    );
  }

  // 检查是否已登录
  const currentUser = getCurrentUser();
  if (!currentUser) {
    return (
      <div className="min-h-screen flex justify-center items-center bg-gray-50">
        <div className="max-w-md w-full mx-auto p-6">
          <div className="bg-white rounded-lg shadow-sm p-8 text-center">
            <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <FaUser className="w-8 h-8 text-gray-400" />
            </div>
            <h2 className="text-xl font-semibold text-gray-900 mb-2">需要登录</h2>
            <p className="text-gray-600 mb-6">请先登录后查看个人资料</p>
            <div className="space-y-3">
              <button
                onClick={() => router.push('/login')}
                className="w-full bg-cyan-500 text-white py-2 px-4 rounded-md hover:bg-cyan-600 transition-colors"
              >
                立即登录
              </button>
              <button
                onClick={() => router.push('/register')}
                className="w-full bg-gray-100 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-200 transition-colors"
              >
                注册账号
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (error || !profile) {
    return (
      <div className="min-h-screen flex justify-center items-center p-4">
        <div className="text-center">
          <div className="text-red-500 text-xl mb-2">⚠️</div>
          <p className="text-gray-600">{error || '用户不存在'}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-6 py-8">
        {/* 基本信息卡片 */}
        <div className="bg-white rounded-lg overflow-hidden shadow-sm">
          {/* 头像和基本信息区域 */}
          <div className="flex flex-col items-center p-12 border-b bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
            <div className="w-28 h-28 sm:w-36 sm:h-36 rounded-full border-4 border-white overflow-hidden bg-white shadow-xl mb-8">
              {profile.avatar ? (
                <CosImage
                  path={profile.avatar}
                  alt={profile.nickname}
                  className="w-full h-full object-cover"
                  width={128}
                  height={128}
                />
              ) : (
                <div className="w-full h-full flex items-center justify-center bg-gray-200 text-gray-400">
                  <FaUser className="w-16 h-16" />
                </div>
              )}
            </div>
            <h1 className="text-3xl sm:text-4xl font-semibold text-gray-900 mb-3">{profile.nickname}</h1>
            <p className="text-sm text-gray-600 mb-1">{profile.email}</p>
            <p className="text-sm text-gray-700 text-center max-w-md">{profile.bio || '这个人很懒，什么都没写~'}</p>
            
            {/* 用户状态标签 */}
            <div className="flex items-center gap-2 mt-4">
              <span className={`px-3 py-1 rounded-full text-xs font-medium ${
                profile.status === 'ACTIVE' ? 'bg-green-100 text-green-800' :
                profile.status === 'INACTIVE' ? 'bg-red-100 text-red-800' :
                'bg-gray-100 text-gray-800'
              }`}>
                {profile.status === 'ACTIVE' ? '活跃' : 
                 profile.status === 'INACTIVE' ? '非活跃' : '未知'}
              </span>
              <span className="px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                {profile.role === 'SUPER_ADMIN' ? '超级管理员' :
                 profile.role === 'ADMIN' ? '管理员' :
                 profile.role === 'MODERATOR' ? '版主' : '普通用户'}
              </span>
            </div>
          </div>

          {/* 统计数据区域 */}
          <div className="p-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-6">用户统计</h2>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
              {/* 积分 */}
              <div className="flex items-center p-6 bg-gradient-to-br from-yellow-50 to-orange-50 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                <FaCoins className="text-yellow-500 text-xl" />
                <div className="ml-3">
                  <div className="text-lg font-bold text-gray-900">{profile.points}</div>
                  <div className="text-xs text-gray-600">积分</div>
                </div>
              </div>

              {/* 学习时长 */}
              <div className="flex items-center p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                <FaGraduationCap className="text-green-500 text-xl" />
                <div className="ml-3">
                  <div className="text-lg font-bold text-gray-900">{(profile.studyTime / 3600).toFixed(1)}</div>
                  <div className="text-xs text-gray-600">学习时长(小时)</div>
                </div>
              </div>

              {/* 登录次数 */}
              <div className="flex items-center p-6 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                <FaUser className="text-blue-500 text-xl" />
                <div className="ml-3">
                  <div className="text-lg font-bold text-gray-900">{profile.loginCount}</div>
                  <div className="text-xs text-gray-600">登录次数</div>
                </div>
              </div>

              {/* 加入时间 */}
              <div className="flex items-center p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl shadow-sm hover:shadow-md transition-shadow">
                <FaCalendar className="text-purple-500 text-xl" />
                <div className="ml-3">
                  <div className="text-sm font-medium text-gray-900">
                    {new Date(profile.createdAt).toLocaleDateString()}
                  </div>
                  <div className="text-xs text-gray-600">加入时间</div>
                </div>
              </div>
            </div>

            {/* 内容统计 */}
            <div className="mt-8">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">内容贡献</h3>
              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                <div 
                  className="flex items-center p-4 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer"
                  onClick={() => loadModalData('courses')}
                >
                  <FaBook className="text-indigo-500" />
                  <div className="ml-3">
                    <div className="text-sm font-medium text-gray-900">{profile.publishedCourseCount}</div>
                    <div className="text-xs text-gray-600">发布课程</div>
                  </div>
                </div>
                
                <div 
                  className="flex items-center p-4 bg-gradient-to-br from-green-50 to-emerald-50 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer"
                  onClick={() => loadModalData('posts')}
                >
                  <FaComment className="text-green-500" />
                  <div className="ml-3">
                    <div className="text-sm font-bold text-gray-900">{profile.postCount}</div>
                    <div className="text-xs text-gray-600">帖子</div>
                  </div>
                </div>
                
                <div 
                  className="flex items-center p-4 bg-gradient-to-br from-orange-50 to-red-50 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer"
                  onClick={() => loadModalData('publishedTasks')}
                >
                  <FaPlus className="text-cyan-500" />
                  <div className="ml-3">
                    <div className="text-sm font-medium text-gray-900">{profile.publishedTaskCount}</div>
                    <div className="text-xs text-gray-600">发布任务</div>
                  </div>
                </div>
                
                <div 
                  className="flex items-center p-4 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer"
                  onClick={() => loadModalData('acceptedTasks')}
                >
                  <FaCheck className="text-blue-500" />
                  <div className="ml-3">
                    <div className="text-sm font-medium text-gray-900">{profile.acceptedTaskCount}</div>
                    <div className="text-xs text-gray-600">接受任务</div>
                  </div>
                </div>
              </div>
            </div>

            {/* 最近登录时间 */}
            <div className="mt-8 p-6 bg-gradient-to-br from-gray-50 to-slate-50 rounded-xl shadow-sm">
              <div className="flex items-center">
                <FaClock className="text-gray-500 mr-3 text-lg" />
                <span className="text-sm text-gray-700 font-medium">
                  最近登录：{profile.lastLoginAt ? new Date(profile.lastLoginAt).toLocaleString() : '从未登录'}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 弹窗 */}
      {showModal && (
        <div className="fixed inset-0 bg-black/50 bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-hidden">
            <div className="flex items-center justify-between p-6 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900">{getModalTitle()}</h3>
              <button
                onClick={() => setShowModal(false)}
                className="text-gray-400 hover:text-gray-600 transition-colors"
              >
                <FaTimes className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6">
              {renderModalContent()}
            </div>
          </div>
        </div>
      )}
    </div>
  );
} 